<template>
  <table-view
    :data="messageListData"
    header-cell-class-name="table-header"
    size="medium"
    border
    @row-click="cellClick"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55"
      header-align="center"
      align="center"
    />
    <el-table-column
      label="消息内容"
      header-align="center"
    >
      <template #default="scope">
        <div class="message">
          <div class="message-title text-line-1">
            <span
              v-if="type=='1'"
              class="unread"
            />
            <span
              v-else-if="type=='2'"
              class="read"
            />
            <span
              v-else
              :class="[scope.row.IsRead?'read':'unread']"
            />
            <span>{{ scope.row.Content?.title }}</span>
          </div>
          <div class="message-con">
            <my-tooltip
              :content="scope.row.Content?.content"
              :is-link="false"
              con-color="#666"
            />
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="消息时间"
      align="center"
      header-align="center"
      width="160px"
      show-overflow-tooltip
    >
      <template #default="scope">
        <span>{{ dateFormat('yyyy-mm-dd HH:MM', parseInt(scope.row.sendTime/1000000)) }}</span>
      </template>
    </el-table-column>
  </table-view>
  <div class="bottom-operation">
    <div class="btn">
      <el-button
        class="border-btn"
        size="small"
        :disabled="selection.length===0"
        @click="deleteSelect"
      >删除
      </el-button>
      <el-button
        v-if="types !== '2'"
        class="border-btn"
        size="small"
        :disabled="selection.length===0"
        @click="readSelect"
      >标记已读
      </el-button>
      <el-button
        v-if="types !== '2'"
        class="border-btn"
        size="small"
        @click="readAll"
      >全部已读
      </el-button>
      <el-button
        class="border-btn"
        size="small"
        @click="deleteAll"
      >全部删除
      </el-button>
    </div>
    <Pagination
      v-model:page="msgQuery.page"
      v-model:limit="msgQuery.pageSize"
      style="display: flex; justify-content: flex-end"
      :total="total"
      @pagination="getMessageList"
    />
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { myMessageList, myMessageDelete, myMessageRead } from '@/api/message.js'
import messageSetting from '@/utils/messageSetting.js'
import { crmStore } from '@CRM/store'
import { useRouter } from 'vue-router'
export default {
  props: {
    types: {
      type: String,
      default: undefined, // 1 未读，2 已读
    },
  },
  setup(props, context) {
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    const datas = reactive({
      messageSettingData: messageSetting,
      userInfo: crmStore.getters['user/userInfo'],
      messageListData: [],
      total: 0,
      selection: [],
      msgQuery: {
        page: 1,
        pageSize: 20,
        types: props.types,
        username: crmStore.getters['user/userInfo']['userName'],
        timestamp: null,
      },
    })

    const linkPathData = (data) => {
      var obj = {
        path: datas.messageSettingData[data.code].path,
        query: data.object,
      }
      // switch (data.code) {
      //   case 'myStartWorkFlow':
      //     obj.path = '/audit/myStarted/myStartedDetail'
      //     obj.query = data.object
      //     break
      //   case 'myWithWorkFlow':
      //     obj.path = '/audit/myDealWith/myDealWithDetail'
      //     obj.query = { ...data.object, types: 'edit' }
      //     break
      //   default:
      //     break
      // }
      return obj
    }

    const getMessageList = () => {
      myMessageList(datas.msgQuery).then((res) => {
        if (res.code === 0) {
          datas.messageListData = res.data.list || []
          datas.total = res.data.total
        }
      })
    }

    const cellClick = (row, column, event) => {
      if (column.label !== '消息内容' && column.label !== '消息时间') {
        return
      }
      var linkData = linkPathData(row.Content)
      if (linkData.path) {
        // 此消息已读
        var data = {
          username: datas.userInfo.userName,
          msgList: [{ sendTime: row.sendTime, toType: row.toType }],
        }
        myMessageRead(data).then((res) => {
          if (res.code === 0) {
            getMessageList()
          }
        })
        router.push({
          path: linkData.path,
          query: linkData.query,
        })
      }
    }

    const deleteSelect = () => {
      currentInstance.proxy
        .alertBox({
          message: '数据删除后不可恢复，确定删除？',
          title: '消息删除',
        })
        .then(() => {
          var delList = datas.selection.map((p) => {
            return {
              sendTime: p.sendTime,
              toType: p.toType,
            }
          })
          var data = {
            username: datas.userInfo.userName,
            msgList: delList,
          }
          myMessageDelete(data).then((res) => {
            if (res.code === 0) {
              getMessageList()
              if (props.type !== '2') {
                // 更新右上角未读消息数量
                crmStore.dispatch('message/getUnreadMsgNum')
              }
            }
          })
        })
    }

    const readSelect = () => {
      var delList = datas.selection.map((p) => {
        return {
          sendTime: p.sendTime,
          toType: p.toType,
        }
      })
      var data = {
        username: datas.userInfo.userName,
        msgList: delList,
        types: '',
      }
      myMessageRead(data).then((res) => {
        if (res.code === 0) {
          getMessageList()
          // 更新右上角未读消息数量
          crmStore.dispatch('message/getUnreadMsgNum')
        }
      })
    }

    const readAll = () => {
      var data = {
        username: datas.userInfo.userName,
        types: 'all',
      }
      myMessageRead(data).then((res) => {
        if (res.code === 0) {
          getMessageList()
          // 更新右上角未读消息数量
          crmStore.dispatch('message/getUnreadMsgNum')
        }
      })
    }

    const deleteAll = () => {
      console.log('deleteAll')
      currentInstance.proxy
        .alertBox({
          message: '数据删除后不可恢复，确定全部删除？',
          title: '消息删除',
        })
        .then(() => {
          var data = {
            username: datas.userInfo.userName,
            types: 'all',
          }
          myMessageDelete(data).then((res) => {
            if (res.code === 0) {
              getMessageList()
              if (props.type !== '2') {
                // 更新右上角未读消息数量
                crmStore.dispatch('message/getUnreadMsgNum')
              }
            }
          })
        })
    }

    const handleSelectionChange = (val) => {
      datas.selection = val
    }

    onMounted(() => {
      getMessageList()
    })

    return {
      ...toRefs(datas),
      cellClick,
      handleSelectionChange,
      deleteSelect,
      readSelect,
      readAll,
      deleteAll,
      getMessageList,
    }
  },
}
</script>

<style lang="scss" scoped>
.message {
  line-height: 24px;
  .message-title {
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .unread {
      display: inline-block;
      width: 4px;
      height: 4px;
      margin-right: 4px;
      background: red;
      border-radius: 50%;
    }
    .read {
      display: inline-block;
      width: 4px;
      height: 4px;
      margin-right: 4px;
      background: transparent;
      border-radius: 50%;
    }
  }
  .message-con {
    margin-left: 8px;
  }
}
.bottom-operation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
